<template>
  <div>
    <!-- 头部 -->
    <market-header></market-header>
    <!-- main -->
    <div class="container">
      <div class="left">
        <div class="imgShow">
          <img :src="goodsUrl[0]"
               alt="商品图片"
               ref="imgShow"
               class="imgShow">
        </div>
        <div>
          <img v-for="(item,index) in goodsUrl"
               :key="index"
               :src="goodsUrl[index]"
               alt="商品图片"
               class="imgList"
               @mouseenter="change(index)">
        </div>
        <div>
          <input type="button"
                 value="收藏宝贝"
                 @click="collect"
                 v-if="collectFlag"
                 class="collectBtn">
          <input type="button"
                 value="已收藏"
                 @click="uncollect"
                 v-else
                 class="collectBtn">
          <span class="goodsCollect">({{ goodsCollect }}人气)</span>
        </div>
      </div>
      <div class="right">
        <h3>{{ goodsName }}</h3>
        <div class="goods">转卖价：
          <span class="goodsPrice">￥{{ goodsPrice }}</span>
          <span class="goodsOrigin">￥{{ goodsOrigin }}</span>
        </div>
        <div class="goods goodsUser">商家：
          <img :src="userImg"
               alt="用户头像"
               class="userImg">
          {{ goodsUser }}
          <router-link :to="{path:'/sellerInfo',query:{username:goodsUser}}"
                       class="enter">进入店铺</router-link>
          <router-link :to="{path:'/chat',query:{chat_name:goodsUser}}"
                       target="_blank">联系卖家</router-link>
        </div>
        <div class="goods">成色：{{ goodsInfo }}</div>
        <div class="goods">所在地：{{ goodsLocation }}</div>
        <div class="goods">数量：<el-input-number v-model="num"
                           :min="1"
                           :max="Number(goodsAmount)"
                           size="small"></el-input-number>件(库存{{ goodsAmount }}件)</div>
        <rh-button type="f30"
                   v-if="!userFlag"
                   @click="addCart">加入购物车</rh-button>
        <rh-button type="f30"
                   v-if="userFlag"
                   :disabled="true">加入购物车</rh-button>
        <rh-button type="f10"
                   v-if="!userFlag">立即购买</rh-button>
        <rh-button type="f10"
                   v-if="userFlag"
                   :disabled="true">立即购买</rh-button>
        <div class="goods goodsReturn">
          <div v-if="goodsReturn">支持7天无理由退货</div>
          <div v-else>不支持7天无理由退货</div>
        </div>
        <div v-if="userFlag">
          <router-link :to="{path:'/editGoods',query:{id:goodsId}}">
            <rh-button type="f30">编辑商品</rh-button>
          </router-link>
          <rh-button type="f10"
                     @click="delGoods">删除商品</rh-button>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <market-footer></market-footer>
  </div>
</template>

<script>
import MarketHeader from "@/components/common/MarketHeader"
import MarketFooter from "@/components/common/MarketFooter"
import RhButton from '@/components/basic/rh-button'
export default {
  components: {
    MarketHeader,
    MarketFooter,
    RhButton
  },
  data () {
    return {
      goodsName: '',
      goodsInfo: '',
      goodsLocation: '',
      goodsPrice: '',
      goodsOrigin: '',
      goodsTime: '',
      goodsUser: '',
      goodsAmount: '',
      goodsReturn: '',
      goodsCollect: '',
      goodsId: '',
      collectFlag: true,
      username: '',
      collectId: '',
      goodsImages: '',
      goodsUrl: [],
      num: 1,
      userImg: '',//用户头像
      userFlag: '', // 用户是否是商家
    }
  },
  created () {
    this.username = localStorage.getItem("username");
    this.$http.post('http://localhost:3000/userInfo', { username: this.username }).then(response => {
      this.userImg = response.data.data.userImg;
    })
    this.$http.post('http://localhost:3000/goodsInfo', { id: this.$route.query.id }).then(response => {
      this.goodsName = response.data.data.goodsName;
      this.goodsInfo = response.data.data.goodsInfo;
      this.goodsLocation = response.data.data.goodsLocation;
      this.goodsPrice = response.data.data.goodsPrice;
      this.goodsOrigin = response.data.data.goodsOrigin;
      this.goodsId = response.data.data._id;
      this.goodsTime = response.data.data.goodsTime;
      this.goodsUser = response.data.data.goodsUser;
      this.goodsAmount = response.data.data.goodsAmount;
      this.goodsReturn = (response.data.data.goodsReturn == "是") ? true : false;
      this.goodsCollect = response.data.data.goodsCollect;
      this.goodsImages = response.data.data.goodsImages;
      this.goodsImages.forEach(item => {
        this.goodsUrl.push(item.url);
      })
      this.userFlag = (this.goodsUser == this.username) ? true : false;

      return this.$http.post('http://localhost:3000/users/collect', { username: this.username, _id: this.goodsId, time: false })
    }).then(response => {
      this.collectFlag = response ? false : true;
      return this.$http.post('http://localhost:3000/collect', { username: this.username, _id: this.goodsId })
    }).then(response => {
      // 判断是否收藏此商品，并获取商品的id
      this.collectId = response.data.data._id;
    })
  },
  methods: {
    collect () {
      this.$http.post('http://localhost:3000/users/collect', { username: this.username, _id: this.goodsId, time: new Date().toLocaleString() }).then(response => {
        this.collectFlag = !this.collectFlag;
        return this.$http.post('http://localhost:3000/collect', { username: this.username, _id: this.goodsId })
      }).then(response => {
        this.collectId = response.data.data._id;
        this.goodsCollect += 1;
      })
    },
    uncollect () {
      this.$http.post('http://localhost:3000/users/uncollect', { _id: this.collectId, id: this.goodsId }).then(response => {
        this.collectFlag = !this.collectFlag;
        this.goodsCollect -= 1;
      })
    },
    change (index) {
      this.$refs.imgShow.src = this.goodsUrl[index];
    },
    delGoods () {
      if (confirm('此操作将永久删除该商品, 是否继续?')) {
        this.$http.post('http://localhost:3000/users/delGoods', { goodsId: this.goodsId }).then(response => {
          this.$router.push({ path: '/seller' });
        })
      }
    },
    addCart () {
      let obj = {
        username: this.username,
        goodsId: this.goodsId,
        goodsCount: this.goodsCount
      }
      this.$http.post('http://localhost:3000/users/addCart', obj).then(response => {
        if (response.data.status == 0) {
          alert('添加成功');
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 100px auto;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;

  .imgShow {
    width: 400px;
    height: 400px;
    margin-bottom: 15px;
  }
  .imgList {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    margin-bottom: 10px;
  }
  .imgList:hover {
    outline: 3px solid pink;
  }
  .collectBtn {
    border: none;
    background-color: #ffffff;
    color: #424242;
    outline: none;
    cursor: pointer;
  }
  .goodsCollect {
    font-size: 14px;
    color: #424242;
  }
  .right {
    width: 500px;

    h3 {
      margin-bottom: 20px;
      color: #3c3c3c;
    }
    .goods {
      margin-bottom: 20px;

      .goodsPrice {
        color: #f10;
        font-size: 20px;
        font-weight: bold;
      }
      .goodsOrigin {
        text-decoration-line: line-through;
      }
    }
    .goodsUser {
      display: flex;
      align-items: center;
      height: 60px;
      padding: 0 10px;
      background-color: rgba(255, 192, 203, 0.5);
      cursor: pointer;

      .enter {
        margin: 0 20px 0 80px;
      }
    }
    .userImg {
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 1px solid #ccc;
      margin-right: 10px;
    }
    .goodsReturn {
      display: inline-block;
      margin: 20px;
      font-size: 14px;
    }
  }
}
</style>